<template>
  <div class="man_note">
    <div class="title">
      <div>管理用户</div>
    </div>

    <!-- 核心内容区 -->
    <br>

    <el-table :data="all_users.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe
      style="width: 100%; max-height: 700px; overflow: scroll;" @selection-change="handleSelectionChange"
      class="table_scrollbar">

      <!-- 多选功能 -->
      <el-table-column type="selection" width="55">
      </el-table-column>

      <!-- 基本内容 -->
      <!-- user_name -->
      <el-table-column prop="user_name" label="用户名" width="120">
      </el-table-column>

      <!-- user_signature -->
      <el-table-column prop="title" label="个性签名" width="150">
        <template v-slot="scope">
          {{ scope.row.user_signature.slice(0, 10) }}·····
        </template>
      </el-table-column>

      <!-- user_avatar -->
      <el-table-column prop="user_avatar" label="用户头像" width="170">
        <template v-slot="scope">
          <img :src="scope.row.user_avatar" alt="" style="width:80px;height: 80px; border-radius: 8px;">
        </template>
      </el-table-column>

      <!-- user_role -->
      <el-table-column prop="user_role" label="权限" width="80">
        <template v-slot="scope">
          <el-tag type="warning" >{{ scope.row.user_role }}</el-tag>
        </template>
      </el-table-column>

      <!-- user_level -->
      <el-table-column prop="user_level" label="等级" width="80">
        <template v-slot="scope">
          <el-tag>{{ scope.row.user_level }}</el-tag>
        </template>
      </el-table-column>

      <!-- user_sex -->
      <el-table-column prop="user_sex" label="性别" width="80">
        <template v-slot="scope">
          <el-tag>{{ scope.row.user_sex }}</el-tag>
        </template>
      </el-table-column>

      <!-- user_career -->
      <el-table-column prop="user_career" label="职业" width="80">
        <template v-slot="scope">
          <el-tag>{{ scope.row.user_career }}</el-tag>
        </template>
      </el-table-column>

      <!-- 功能键-操作区 -->
      <el-table-column prop="address" label="操作">
        <template v-slot="scope">
          <el-button type="warning" plain @click="delete_ById(scope.row.user_id)">删除</el-button>
          <el-button type="primary" plain @click="prepare_alter(scope.row.user_id)">分配权限</el-button>
        </template>
      </el-table-column>

    </el-table>
    <br>

    <!-- 分页 -->
    <div style="background-color:white; width: 100%; position: fixed; top: 75%">
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[2, 4, 6, 8, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="all_users.length">
        </el-pagination>
      </div>
    </div>

    <!-- 抽屉--修改个人资料 -->
    <el-drawer title="一个小抽屉" :visible.sync="drawer" :with-header="true" append-to-body>

      <h1 style="text-align: center">分配用户权限</h1>

      <div style="padding: 20px; margin-top: 60px;">

        <!-- 隐藏 user_id -->

        <!-- tag -->
        <div style="margin-bottom: 10px;">
          <!-- 全部 前端 折腾 Java MySQL NodeJS Python -->
          <el-radio v-model="pre_data.user_role" label="admin" border>admin </el-radio>
          <el-radio v-model="pre_data.user_role" label="normal" border>normal </el-radio>
        </div>

        <el-button type="primary" plain @click="send_alter">提交修改</el-button>
      </div>
    </el-drawer>

  </div>
</template>

<script>
export default {
  data() {
    return {
      //  视频文件的数据
      videoFile: [
        // {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
      ],
      // 所有用户数据
      all_users: [
        {
          "user_id": 1,
          "user_name": "admin",
          "password": "admin",
          "user_avatar": "http://localhost:3000/data/_r.jpg",
          "user_level": "6",
          "user_sex": "男",
          "user_career": "家里蹲",
          "user_signature": "手持两把锟斤拷，口中疾呼烫烫烫。脚踏千朵屯屯屯，笑看万物锘锘锘",
          "user_role": "admin",
          "user_power": "god"
        }
      ],
      // 当前页码
      currentPage: 1,
      // 当前选择的每页多少条数据，来自:page-size里面数组选择项变化，触发的handleSizeChange()
      pageSize: 4,
      // 多选
      multipleSelection: [],
      // 控制 修改评论对话框 的展示
      centerDialogVisible: false,
      // 抽屉控制
      drawer: false,

      // 预备修改的单条用户数据
      pre_data: {
        "user_id": 1,
        "user_name": "admin",
        "password": "admin",
        "user_avatar": "http://localhost:3000/data/_r.jpg",
        "user_level": "6",
        "user_sex": "男",
        "user_career": "家里蹲",
        "user_signature": "手持两把锟斤拷，口中疾呼烫烫烫。脚踏千朵屯屯屯，笑看万物锘锘锘",
        "user_role": "admin",
        "user_power": "god"
      }
    }
  },
  mounted() {
    this.getAllUsers();
  },
  methods: {
    // 上传头像  http://localhost:3000/atom/imgUpload -----------------------------------
    upload(param) {
      const formdate = new FormData()
      formdate.append('data', param.file)
      const url = '/atom/imgUpload'
      const headers = {
        'Content-Type': 'multipart/form-data'
      }
      // axios.post的构造函数有顺序，不可乱
      this.$http.post(
        url,
        formdate,
        headers
      ).then(res => {
        // console.log(data)
        this.$message.success("图片上传成功")
        this.pre_data.cover_img = res.data.imgfile_url
      }).catch(response => {
        console.log(response)
      })
    },
    handleAvatarSuccess(res, file) {
      this.pre_data.cover_img = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 上传视频  http://localhost:3000/atom/noteUpload -------------------------------------
    upload_VideoNode_videurl(param) {
      const formdate = new FormData()
      formdate.append('data', param.file)
      const url = '/atom/noteUpload'
      const headers = {
        'Content-Type': 'multipart/form-data'
      }
      // axios.post的构造函数有顺序，不可乱
      this.$http.post(
        url,
        formdate,
        headers
      ).then(res => {
        // console.log(data)
        this.$message.success("markdown用户文件上传成功")
        this.videoFile.push({ name: param.file.name, url: res.data.mdfile_url })
        console.log(res.data.mdfile_url)
        this.pre_data.file_address = res.data.mdfile_url
      }).catch(response => {
        console.log(response)
      })
    },
    // ------------------------------------------
    // 修改用户内容前的预备操作
    prepare_alter(user_id) {
      for (var i = 0; i < this.all_users.length; i++) {
        var item = this.all_users[i];
        if (item.user_id == user_id) {
          this.pre_data = this.all_users[i]

          this.drawer = true
        }
      }
    },

    // 分配用户权限 http://localhost:3000/user_admin/assignUserRole
    send_alter() {
      this.$http({
        url: '/user_admin/assignUserRole',
        params: {
          user_id: this.pre_data.user_id,
          user_role: this.pre_data.user_role,
        },
        method: 'post'
      }).then(res => {
        this.$message.success("分配用户权限成功")
        this.getAllUsers()
        this.drawer = false
      }).catch(res => {
        console.log(res);
      })
    },

    // --------------------------------------------

    // 获取所有用户数据 http://localhost:3000/user_admin/getAllUsers
    getAllUsers() {
      this.$http({
        url: '/user_admin/getAllUsers',
        method: 'post'
      }).then(res => {
        // 存储所有用户
        this.all_users = res.data.data
      }).catch(res => {
        console.log(res);
      })
    },

    // 删除用户 http://localhost:3000/user_admin/deleteUserById
    delete_ById(id) {
      this.$http({
        url: '/user_admin/deleteUserById',
        params: {
          user_id: id
        },
        method: 'post'
      }).then(res => {
        // 删除成功判断
        if (res.data.data.affectedRows == 1) {
          this.$message.success('已删除用户')
          this.getAllUsers()
        } else {
          return this.$message.error('删除失败，请重试')
        }
      }).catch(res => {
        console.log(res);
      })
    },

    // 修改每页多少条数据
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },

    // 当前页编号
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    // 多选功能
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
    },
  }
}
</script>

<style lang="less" scoped>
.man_note {
  width: 98%;
  height: 98%;
  background-color: white;
  border-radius: 20px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 10px;
  padding-left: 20px;
  // padding-bottom: 240px;
  overflow: scroll;
}

.man_note::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.title {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  height: 32px;
  font-size: 24px;
  // margin-top: 10px;
  // margin-left: 20px;
  padding-left: 12px;
}

.title::before {
  position: absolute;
  left: 0px;
  width: 5px;
  top: 4px;
  bottom: 4px;
  background-color: rgb(58, 100, 255);
  content: "";
  border-radius: 16px;
}
</style>